<template>
  <div class="rcord">
    <div class="record_timeline">
      <span v-if="records.length == 0" class="text-aligin:center;">暂无数据  </span>
      <el-timeline>

        <el-timeline-item :timestamp="String(record.createTime).replace('T', ' ')" placement="top" v-for="record in records" :key="record.mesId">
          <el-card class="round">
            <div v-html="JSON.parse(record.mesStuInfo).content"></div>
            <p><i class="el-icon-chat-line-square"></i> {{stuName}} 提交于 {{String(record.createTime).replace("T", " ")}}</p>
            <div v-if="record.mesTeaInfo === ''"> <i class="el-icon-time"></i> {{record.courseName}}-老师暂无回复</div>
            <div v-if="record.mesTeaInfo != ''">
                <i class="el-icon-chat-dot-square"></i> {{record.courseName}}-教师回复: 
                <div v-html="JSON.parse(record.mesTeaInfo).content" >
                </div>
            </div>

          </el-card>
        </el-timeline-item>


      </el-timeline>
    </div>
  </div>
</template>

<script>
import { getMyMsgRecord } from '../api/user';
export default {
    name:"ReplyRecord",
    props:['stuName'],
    data() {
      return {
        records:[]
      }
    },
    methods: {
      getRecords() {
        getMyMsgRecord().then(res => {
          if (res.code == 200) {
            this.records = res.data.records
          }
        })
      }
    },
    mounted() {
      this.getRecords()
    }
};
</script>

<style>
.rcord{
    margin-top: 4.5%;
    margin-bottom: 2%;
    width: 95%;
    min-height: 800px;
    /* height: 90%; */
    background-color: white;
    border-radius: 15px;
    
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

    /* 子容器 */
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    /* position: relative; */
    /* z-index: 0.5; */
    /* align-items: center; */
}

.record_timeline {
    margin-top: 5%;
    width: 80%;
    /* position: relative; */

}
.round{
    border-radius: 15px;
}
.el-timeline-item__node {
    background-color: #FED049 !important;
}
.el-timeline-item__tail {
    border-left:2px solid rgba(254, 208, 73, 0.8);
}
</style>